<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入链接名进行搜索"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
    <el-button type="primary" @click="showAddLinkDialog">新增链接</el-button>
    <el-button type="danger" @click="deleteLinks">批量删除</el-button>
    <el-table :data="links" border @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="linkName" label="链接名"></el-table-column>
      <el-table-column prop="link" label="链接"></el-table-column>
      <el-table-column label="操作"      >
        <template slot-scope="scope">
          <el-button type="primary" @click="showEditLinkDialog(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteLink(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="addLinkDialogVisible" title="新增链接">
      <el-form :model="newLinkForm" label-width="80px">
        <el-form-item label="链接名">
          <el-input v-model="newLinkForm.linkName"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="newLinkForm.link"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addLinkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addLink">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="editLinkDialogVisible" title="编辑链接">
      <el-form :model="editLinkForm" label-width="80px">
        <el-form-item label="链接名">
          <el-input v-model="editLinkForm.linkName"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="editLinkForm.link"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editLinkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editLink">确定</el-button>
      </div>
    </el-dialog>

    <!--分页组件-->
    <div class="pagination-container">
      <!--      <el-button type="primary" class="butT" @click="dialogFormVisible2 = true" style="float: left;margin-left: 30px">上传附件</el-button>-->
      <el-pagination
          class="pagiantion"

          @current-change="handleCurrentChange"

          :current-page="pagination.currentPage"

          :page-size="pagination.pageSize"

          layout="total, prev, pager, next, jumper"

          :total="pagination.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name:"AdminLink",
  data() {
    return {
      chooseAll: false, //表示是否全选
      uids:null,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        nTitle: "",//查询条件
        nAuthor: "",
        nClass: ""
      },
      searchText: '',
      links: [],
      fixedLinks: [], // 添加一个新的属性用于存储固定的链接数据
      addLinkDialogVisible: false,
      editLinkDialogVisible: false,
      newLinkForm: {
        linkName: '',
        link: ''
      },
      editLinkForm: {
        id: '',
        linkName: '',
        link: ''
      }
    };
  },
  watch: {
    links: {
      handler() {
        //必须每个数据isChoose都为true，那么全选才会true
        //  let result = true;//假设是全选
        //  this.tableData.forEach(user=>{
        //   if(user.isChoose==false){
        //     result = false;
        //   }
        //  })
        //  this.chooseAll = result;

        this.chooseAll = this.links.every((link) => link.isChoose == true);
      },
      //开启深度监听
      deep: true,
    },
  },
  mounted() {
    this.fetchLinks();//的链接数据
  },
  methods: {
    // 表格勾选钩子
    handleSelectionChange(val) {
      this.uids = val.map(link => {
        return link.id

      })
      console.log(val,'勾选的东西');
    },
    fetchLinks() {
      //使用axios或其他库发送GET请求到后端获取链接数据
      this.$axios.get('http://localhost:8081/link/all')
          .then(response => {
            this.links = response.data;
            console.log(this.links )

          })
          .catch(error => {
            console.error(error);
          });

    },

    search() {
      // 使用axios或其他库发送GET请求到后端进行模糊查询
      this.$axios.get("http://localhost:8081/Link/pagin?LinkName="+this.searchText+"&pageNum=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
          .then(response => {
            console.log("response")

            console.log(response)
            this.links = response.data.data.list;
          })
          .catch(error => {
            console.error(error);
          });
    },
    showAddLinkDialog() {
      this.addLinkDialogVisible = true;
    },
    addLink() {
      // 使用axios或其他库发送POST请求到后端新增链接
      this.$axios.post('http://localhost:8081/link/add', this.newLinkForm)
          .then(() => {
            this.addLinkDialogVisible = false;
            this.fetchLinks();
          })
          .catch(error => {
            console.error(error);
          });
    },

    showEditLinkDialog(link) {
      this.editLinkForm = {
        id: link.id,
        linkName: link.linkName,
        link: link.link
      };
      this.editLinkDialogVisible = true;
    },
    editLink() {
      // 使用axios或其他库发送PUT请求到后端编辑链接
      this.editLinkForm.sort=0
      this.editLinkForm.createTime=""
      this.$axios.post("http://localhost:8081/Link/update", this.editLinkForm)
          .then(() => {
            this.editLinkDialogVisible = false;
            this.fetchLinks();
          })
          .catch(error => {
            console.error(error);
          });
    },
    deleteLink(link) {
      var params = link;
      console.log(params)
      // 使用axios或其他库发送DELETE请求到后端删除链接
      this.$axios.get("http://localhost:8081/link/del?linkName="+params.linkName)
          .then(() => {
            this.fetchLinks();
          })
          .catch(error => {
            console.error(error);
          });
    },
      // 使用axios或其他库发送DELETE请求到后端批量删除链接
      // 可以将选中的链接ID拼接成字符串，发送到后端进行批量删除
      deleteLinks() {
        // 获取选中的链接ID
        const selectedLinkIds = this.links.filter(link => link.isChoose==true);
        // 使用axios或其他库发送DELETE请求到后端批量删除链接
        this.$axios.post('http://localhost:8081/Link/delLinks',  {ids: this.uids })
            .then(() => {
              this.fetchLinks();
            })
            .catch(error => {
              console.error(error);
            });
      }
  }
};
</script>

<style>
.dialog-footer {
  text-align: right;
}
</style>
